<template>
  <div id="user">
    <el-button icon="el-icon-circle-plus-outline" type="success" @click="addUser">新增用户</el-button>
    <el-table
      :data="userList"
      border
      stripe
    >
      <el-table-column label="用户名" prop="username" align="center"></el-table-column>
      <el-table-column label="角色" prop="roleName" align="center"></el-table-column>
      <el-table-column label="操作" align="center" min-width="200">
        <template v-slot="{row}">
          <el-button type="primary" icon="el-icon-edit" @click="updateUser(row)" size="mini">更新用户信息</el-button>
          <el-button type="danger" icon="el-icon-delete" slot="reference" @click="deleteUser(row)" size="mini">删除
          </el-button>
          <el-button type="info" icon="el-icon-refresh-left" @click="resetPassUser(row)" size="mini">重置用户密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="45%"
    >
      <el-form label-width="80px" :model="fromData" :rules="formRules" ref="ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="请输入用户名" v-model="fromData.username"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select v-model="fromData.roleId" placeholder="请选择角色">
            <el-option v-for="item in roleOptions" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAddUser">确定</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { deleteUser, insertUser, listUser, restPasswordUser, updateUser } from '@/api/user'
import { listRole } from '@/api/role'

export default {
  name: 'User',
  data() {
    return {
      userList: [],
      dialogTitle: '',
      dialogVisible: false,
      fromData: {
        username: '',
        roleId: ''
      },
      roleOptions: [],
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择用户角色', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getData()
    this.getRoleOptions()
  },
  methods: {
    getData() {
      listUser().then(res => {
        this.userList.splice(0, this.userList.length, ...res.data.list)
      })
    },
    getRoleOptions() {
      listRole().then(res => {
        this.roleOptions = res.data.list
      })
    },
    updateUser(row) {
      this.dialogTitle = '修改用户信息'
      this.dialogVisible = true
      delete row.roleName
      Object.assign(this.fromData, row)
    },
    deleteUser(row) {
      this.$confirm('删除用户后该用户将无法登录并清空所有数据，是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser({ id: row.id }).then(res => {
          if (res.resultCode === 200) {
            this.$message.success('删除成功')
          }
          this.getData()
        })
      })
    },
    addUser() {
      this.dialogVisible = true
      this.dialogTitle = '新增用户'
      Object.keys(this.fromData).forEach(key => delete this.fromData[key])
    },
    closeDialog() {
      this.dialogVisible = false
    },
    submitAddUser() {
      this.$refs.ruleForm.validate(valid => {
        if (valid && this.dialogTitle === '新增用户') {
          insertUser(this.fromData).then(res => {
            this.dialogVisible = false
            if (res.resultCode === 200) {
              this.$message.success('操作成功')
            }
            this.getData()
            Object.keys(this.fromData).forEach(key => delete this.fromData[key])
            this.fromData.username = ''
            this.fromData.roleId = ''
          })
        } else if (valid && this.dialogTitle === '修改用户信息') {
          updateUser(this.fromData).then(res => {
            this.dialogVisible = false
            if (res.resultCode === 200) {
              this.$message.success('操作成功')
            }
            this.getData()
          })
        } else {
          return
        }
      })
    },
    resetPassUser(row) {
      restPasswordUser(row.id).then(res => {
        if (res.resultCode) {
          this.$message.success('操作成功')
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
